iT邦幫忙

2024 iThome 鐵人賽

DAY 24
0
Python

python零之旅系列 第 24

DAY24. Python GUI - 畫布及新增圖片

  • 分享至 

  • xImage
  •  

今天我們要來學習的是,
如何在視窗中新增畫布及圖片,
那我們就馬上開始!


1. Canvas畫布

Canvas 是用來讓使用者透過程式「繪圖」的畫布,
我們可以在 Canvas 裡繪製各種形狀。
這裡我們就建立一個畫布,
並將它布置在視窗中。
https://ithelp.ithome.com.tw/upload/images/20241007/20169195UQheYBfa0I.png

如果我們想要在畫布中繪製文字,
可以使用 create_text方法,
並在裡面設置參數,
設計文字的大小、字體、顏色、位置等等。
https://ithelp.ithome.com.tw/upload/images/20241007/201691956dTvnyQH57.png

下圖為運行後的結果。
https://ithelp.ithome.com.tw/upload/images/20241007/20169195lGbLgJzZg4.png

另外,我們也可以使用 create_line方法,
在畫布中繪製直線或是虛線。
其中, dash裡需要加入兩個參數,
一個是表示虛線中的實線長度,
另一個則是表示線條間的間隔。
https://ithelp.ithome.com.tw/upload/images/20241007/201691951UKUrZfi6k.png

下圖為運行後的結果。
https://ithelp.ithome.com.tw/upload/images/20241007/20169195Fgo9erfCnK.png

如果要在畫布繪製圖形,
以下有幾種方法可以繪製各種圖形:

  1. create_rectangle() 繪製矩形
  2. create_oval() 繪製橢圓形、圓形
  3. create_arc() 繪製圓弧
  4. create_polygon() 繪製多邊形
  5. create_image() 繪製圖像

並在這些方法加入參數即可,
以下為需要用到的參數:

  1. x1, y1:圖形左上角繪製起始點
  2. x2, y2:圖形右下角繪製終點
  3. width:邊框粗細
  4. fill:填滿顏色(使用名稱或十六進位色碼)
  5. outline:邊框顏色(使用名稱或十六進位色碼)
  6. dash:虛線設定
  7. start:起始角度(預設 0,正值為逆時針,負值為順時針)
  8. extent:總角度(正值為逆時針,負值為順時針)
  9. style:圓弧樣式,可設定 arc、pieslice (預設)、chord
  10. arr:多邊形座標串列,兩兩一組 [x1,y1,x2,y2,x3,y3....]
  11. image:指向 tk 圖像物件

這裡我們以繪製多邊形為範例,
以下是程式碼:
https://ithelp.ithome.com.tw/upload/images/20241007/20169195WLoivyLW7a.png

繪製結果如下:
https://ithelp.ithome.com.tw/upload/images/20241007/20169195UtAvwXbHFf.png

2. Photoimage圖片
如果要在視窗中顯示圖片,
我們必須搭配 Pillow 函式庫的 ImageTk.Photoimage 建立圖片物件,
透過 Label 或 Canvas 來顯示圖片。

首先,我們需要在 cmd 中安裝 pillow 函式庫,
我們才能使用函式庫中的圖片功能。
https://ithelp.ithome.com.tw/upload/images/20241008/20169195I7RM2mBoLe.png

在程式碼中,
首先我們要在Vs code打開圖片,
並將圖片改為tk的圖片物件,
再建立一個Label,
將圖片放至其中。
https://ithelp.ithome.com.tw/upload/images/20241008/20169195tUS3ks78pN.png

下圖為執行結果。
https://ithelp.ithome.com.tw/upload/images/20241008/20169195ve4fIC8Q5z.png

另外,我們也可以用新增 canvas 畫布的方式,
將圖片加入其中。
https://ithelp.ithome.com.tw/upload/images/20241008/20169195gr5jCA00IS.png

以下為執行結果。
https://ithelp.ithome.com.tw/upload/images/20241008/20169195mZcgrQQ7MQ.png


以上是今天的學習,
這樣我們就可以更靈活地運用新增圖片方式。
參考資料:
https://steam.oxxostudio.tw/category/python/tkinter/photoimage.html#a2


上一篇
DAY23. Python GUI - 選單及下拉選單
下一篇
DAY25. Python GUI - 發送LINE Notify通知
系列文
python零之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言